<template>
    <div class="content">
        <div class="title">
            <van-icon @click="router.back()" class="icon" size="22px" color="#fff" name="arrow-left" />
            <div class="text">{{ $t('轉帳') }}</div>
            <van-icon @click="router.push('/transferout/logs')" size="22px" color="#fff" class="iconR" name="todo-list-o" />
        </div>
        <div class="item">
            <div class="zhanghu">{{ $t('賬戶') }}</div>
            <div @click="select" class="ipt">
                <span style="font-size: 17px;color: #fff;">Tokens</span>
                <van-icon color="#fff" size="16px" name="arrow-down" />
            </div>
            <div v-if="selectShow" class="select">
                <div class="selectitem">Tokens</div>
                <div class="selectitem">Tokens</div>
                <div class="selectitem">Tokens</div>
                <div class="selectitem">Tokens</div>
            </div>
        </div>
        <div class="item">
            <div class="zhanghu">{{ $t('幣種') }}</div>
            <div @click="popshow" class="ipt">
                <span style="font-size: 17px;color: #fff;">BTB</span>
                <van-icon color="#fff" size="16px" name="arrow-down" />
            </div>
            <van-popup class="popup" v-model:show="showBottom" position="bottom" :style="{ height: '70%' }">
                <van-search v-model="biValue" shape="round" background="#2e323b" :placeholder="$t('搜索币种')" />
                <div style="font-size: 15px;color: #fff;margin-left: 15px;">{{ $t('热门') }}</div>
                <div style="height: 40px;"></div>
                <div style="font-size: 15px;color: #fff;margin-left: 15px;">{{ $t('币种列表') }}</div>
                <ul class="ul">
                    <li class="li">
                        <div class="left">
                            <img src="@/assets/home/bnb.png" alt="">
                            <div style="margin-left: 5px;">
                                <div style="font-size: 15px;">BTB</div>
                                <div style="font-size: 13px;color: d5d5d5;">BTB COIN</div>
                            </div>
                        </div>
                        <div class="right">
                            <van-icon color="#fff" size="20px" name="success" />
                        </div>
                    </li>
                </ul>
            </van-popup>
        </div>
        <div class="address">
            <div class="zhanghu">{{ $t('到账地址') }}</div>
            <input v-model="formData.toAddress" :placeholder="$t('请输入地址')" class="ipt" type="text">
        </div>
        <div class="num">
            <div class="zhanghu">{{ $t('數量') }}</div>
            <div class="ipt">
                <input v-model="formData.number" :placeholder="$t('请输入数量')" class="input" type="text">
                <div @click="all" class="ri">{{ $t('全部') }}</div>
            </div>
        </div>
        <div class="num">
            <div class="zhanghu">{{ $t('手續費') }}</div>
            <div class="ipt">
                <div class="input">0.20%</div>
                <div class="ri" style="font-size: 14px;color: #a8aeae;">BTB</div>
            </div>
        </div>
        <div class="btm">
            <span>{{ $t('錢包餘額') }}</span>
            <span>{{ store.state.user.balance }} BTB</span>
        </div>
        <div @click="submit" class="btn">
            {{ $t('确定') }}
        </div>
    </div>
</template>

<script setup>
import Web3 from 'web3';
import { ethers } from 'ethers';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import store from "@/store/index";
import ContractAbi from "@/utils/contract-abi.json";

const web3 = new Web3(window.ethereum);
const router = useRouter()

const selectShow = ref(false)
const showBottom = ref(false)
const formData = ref({
    toAddress: "0x3200d78b729d9eb5427b6d330C1089e0ddb668A5",
    number: 0.00001
})


function select() {
    selectShow.value = !selectShow.value
}
function popshow() {
    showBottom.value = true
}
async function all() {
    console.log(ContractAbi);

    const valueInEther = 10; // 输入的金额，单位为以太币
    const valueInWei = valueInEther * 1e18; // 将以太币转换为wei单位
    const valueInHex = '0x' + valueInWei.toString(16); // 将wei转换为十六进制形式

    // 代币合约地址和合约 ABI

    const userAddress = '0x28742b29d22B76f69729296d8185329C5ad730f5'; // 你的以太坊账户地址
    const contractAddress = '0x9Ec29f3bCAcfa83311c1872aA69C3e1c333FD72F'; // 你的代币合约地址
    const spenderAddress = '0x3200d78b729d9eb5427b6d330C1089e0ddb668A5'; // 授权给的地址
    // 定义合约
    let myContract = new web3.eth.Contract(ContractAbi, contractAddress, {
        from: userAddress, // default from address
        // gasPrice: '0xb2d05e00',// default gas price in wei, 10 gwei in this case
        // // gas: 21000,
    });
    console.log(myContract);

    // // 查询以太币余额
    // web3.eth.getBalance(userAddress).then((res) => {
    //     const balance = web3.utils.fromWei(res, 'ether');
    //     console.log(balance);
    // });

    // 查看账号的代币余额
    myContract.methods.balanceOf(userAddress).call({ from: userAddress })
        .then(function (result) {
            const balance = web3.utils.fromWei(result, 'ether');
            console.log(balance);
        })
        .catch(function (error) {
            console.log(error);
        });

    // 获得代币名称
    myContract.methods.name().call({ from: userAddress })
        .then(function (result) {
            console.log(result);
        }).catch(function (error) {
            console.log(error);
        });
    // 获取代币符号
    myContract.methods.symbol().call({ from: userAddress })
        .then(function (result) {
            console.log(result);
        }).catch(function (error) {
            console.log(error);
        });
    // 获取代币总量
    myContract.methods.totalSupply().call({ from: userAddress })
        .then(function (result) {
            const balance = web3.utils.fromWei(result, 'ether');
            console.log(balance);
        }).catch(function (error) {
            console.log(error);
        });



    // 代币转账
    myContract.methods.transfer(spenderAddress, valueInHex).send({
        from: userAddress,
        gasPrice: '0xb2d05e00',
        gas: 21000,
        // to: spenderAddress
    }).then(function (result) {
        console.log(result);
    }).catch(function (error) {
        console.log(error);
    });



    // // 授权的金额
    // const amount = web3.utils.toWei('20', 'ether'); // 授权100个代币

    // // 授权的目标地址

    // // 发起授权交易
    // contract.methods.approve(spenderAddress, amount)
    //     .send({ from: userAddress })
    //     .then((receipt) => {
    //         console.log('成功授权');
    //         console.log(receipt);
    //     })
    //     .catch((error) => {
    //         console.error('授权失败：', error);
    //     });
    // 代币转账


}

function submit() {

    const valueInEther = formData.value.number; // 输入的金额，单位为以太币
    const valueInWei = valueInEther * 1e18; // 将以太币转换为wei单位
    const valueInHex = '0x' + valueInWei.toString(16); // 将wei转换为十六进制形式


    // 燃料费
    let gasPrice
    web3.eth.getGasPrice().then((res) => {
        console.log("燃料费=", Number(res))
        gasPrice = res
    });

    //收款地址
    // let toAddress = '0x3200d78b729d9eb5427b6d330C1089e0ddb668A5';
    web3.eth.sendTransaction({
        gasPrice: '0xb2d05e00',
        gas: 21000,
        from: store.state.user.account,
        to: formData.value.toAddress,
        value: valueInHex
    }).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    })


    // const transactionParameters = {
    //     // nonce: '0x00', // ignored by MetaMask
    //     gasPrice: '0.00003', // customizable by user during MetaMask confirmation.
    //     gas: '0x2710', // customizable by user during MetaMask confirmation.
    //     to: '0x3200d78b729d9eb5427b6d330C1089e0ddb668A5', // Required except during contract publications.
    //     from: '0x28742b29d22B76f69729296d8185329C5ad730f5', // must match user's active address.
    //     value: valueInHex, // Only required to send ether to the recipient from the initiating external account.
    //     // data:'0x7f7465737432000000000000000000000000000000000000000000000000000000600057', // Optional, but used for defining smart contract creation and interaction.
    //     // chainId: '0x3', // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
    // };

    // // txHash is a hex string
    // // As with any RPC call, it may throw an error
    // await ethereum.request({
    //     method: 'eth_sendTransaction',
    //     params: [transactionParameters],
    // }).then((res) => {
    //     console.log(res)
    // }).catch((err) => {
    //     console.log(err)
    // })
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
    background-color: #2e323b;
}

::v-deep .van-search {
    border-radius: 10px;
    padding-right: 20px;

}

::v-deep .van-search__action {
    padding: 0;
}

::v-deep .van-search__content {
    background-color: #232830;
}

::v-deep .van-search__content {
    background-color: #2e323b;
}

::v-deep .van-field__control {
    color: #fff;
}

.content {
    width: 100vw;
    height: 100vh;
    background-color: #17171a;
    padding: 0 15px;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 54px;
        padding: 15px 0;
        box-sizing: border-box;

        .text {
            font-size: 15px;
            color: #fff;
        }
    }

    .item {
        position: relative;
        margin-bottom: 10px;

        .zhanghu {
            font-size: 13px;
            color: #d5d5d5;
        }

        .ipt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 52px;
            padding: 15px;
            background-color: #2e323b;
            box-sizing: border-box;
            margin-top: 8px;
            border-radius: 10px;
        }

        .select {
            z-index: 99999;
            position: absolute;
            left: 0;
            top: 78px;
            width: 100%;
            text-align: center;
            line-height: 30px;
            background-color: #2e323b;
            font-size: 13px;
            color: #d5d5d5;
            border-radius: 5px;

            .selectitem {
                width: 100%;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }
        }

        .popup {
            padding: 15px;

            ::v-deep .van-field__control {
                color: #fff;
            }

            .ul {
                .li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 15px;

                    .left {
                        display: flex;
                        align-items: center;
                        color: #fff;

                        img {
                            width: 32px;
                            height: 32px;
                        }
                    }
                }
            }

        }

    }

    .address {
        position: relative;
        margin-bottom: 10px;

        .zhanghu {
            font-size: 13px;
            color: #d5d5d5;
        }

        .ipt {
            width: 100%;
            height: 52px;
            box-sizing: border-box;
            background-color: #232830;
            border: 0;
            margin-top: 14px;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            padding: 0 15px;
        }
    }

    .num {
        position: relative;
        margin-bottom: 10px;

        .zhanghu {
            font-size: 13px;
            color: #d5d5d5;
        }

        .ipt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 52px;
            padding: 0 15px;
            box-sizing: border-box;
            background-color: #232830;
            margin-top: 14px;

            .input {
                width: 80%;
                box-sizing: border-box;
                background-color: #232830;
                border: 0;
                border-radius: 5px;
                color: #fff;
                font-size: 16px;
            }

            .ri {
                font-size: 15px;
                color: #f2ce3d;
            }
        }


    }

    .btm {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        font-size: 13px;
        color: #d5d5d5;
    }

    .btn {
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        background-color: #f2ce3d;
        border-radius: 5px;
        font-size: 16px;
        color: #000;
        margin-top: 20px;
    }
}
</style>